<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>纯CSS3下拉菜单导航DEMO演示</title>
    <script>
        window.alert("欢迎！")
    </script>


    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div style="text-align:center;clear:both">
        <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
        <script src="/follow.js" type="text/javascript"></script>
    </div>
    <div class="container">

        <h1>Animated Navigation Examples</h1>

        <h2>Not Animated</h2>
        <nav class="nav nav1">
            <ul>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

        <h2>Fade In and Out</h2>
        <nav class="nav nav2">
            <ul>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

        <h2>Slide Down #1</h2>
        <nav class="nav nav3">
            <ul>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

        <h2>Slide Down #2</h2>
        <nav class="nav nav4">
            <ul>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

        <h2>Fold Out</h2>
        <nav class="nav nav5">
            <ul>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

    </div>



</body>

</html>